<template>
  <div>
    <van-sticky>
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </van-sticky>
    <div style="padding: 0 5%">
      <div style="marginbottom: 8px">
        <h2>求职期望</h2>
        <p style="color: #aaa; margin: 0">
          我们会根据此展示职位，并将拟推荐给BOSS
        </p>
      </div>
      <div class="box">
        <p>求职状态</p>
        <van-cell is-link :title="title" @click="show = true" />
        <van-action-sheet
          v-model="show"
          :actions="actions"
          @select="onSelect"
        />
      </div>
      <div class="box">
        <p>期望职位</p>
        <van-cell is-link :title="title1" @click="show1 = true" />
        <van-action-sheet
          v-model="show1"
          :actions="actions1"
          @select="onSelect1"
        />
      </div>
      <div class="box">
        <p>期望行业</p>
        <van-cell is-link :title="title2" @click="show2 = true" />
        <van-action-sheet
          v-model="show2"
          :actions="actions2"
          @select="onSelect2"
        />
      </div>
      <div class="box">
        <p>工作城市</p>
        <van-field
          readonly
          clickable
          :value="value"
          placeholder="点击选择城市"
          @click="showPicker = true"
        />
        <van-icon class="_icon" name="arrow" />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </div>

      <div class="box">
        <p>薪资要求</p>
        <van-field v-model="value2" placeholder="请输入  eg:9k-12k" />
      </div>
    </div>

    <div class="box_btn">
      <van-button
        class="sub_btn"
        @click="sub_btn"
        color="rgb(71, 218, 218)"
        block
        >保存</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";

// 全局注册
Vue.use(Dialog);
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      value: "",
      value1: "",
      value2: "",
      user_id: "",
      title: "在校-暂不考虑",
      title1: "web前端",
      title2: "互联网IT",
      columns: ["杭州", "北京", "广州", "上海", "深圳"],

      showPicker: false,
      showPicker1: false,
      show: false,
      show1: false,
      show2: false,
      actions: [
        { name: "离校-随时到岗" },
        { name: "在校-月内到岗" },
        { name: "在校-考虑机会" },
        { name: "在校-暂不考虑" },
      ],
      actions1: [
        { name: "web前端" },
        { name: "java后端" },
        { name: "python数据分析" },
      ],
      actions2: [
        { name: "互联网IT" },
        { name: "广告" },
        { name: "金融" },
        { name: "教育培训" },
        { name: "制药/医疗" },
        { name: "交通/物流/运输" },
      ],
    };
  },
  mounted() {
    this.user_id = localStorage.getItem("userId");
    this.axios({
      method: "post",
      url: "http://localhost:3000/sel_resume",
      data: {
        user_id: this.user_id,
      },
    }).then((res) => {
      let data = res.data.data[0];
      // this.message = data.jl_describe;
      (this.title = data.jl_status),
        (this.title1 = data.jl_position),
        (this.title2 = data.jl_industry),
        (this.value = data.jl_city),
        (this.value2 = data.jl_salary)
    });
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      this.title = item.name;
      console.log(item.name);
    },
    onSelect1(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show1 = false;
      this.title1 = item.name;
      console.log(item.name);
    },
    onSelect2(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show1 = false;
      this.title1 = item.name;
      console.log(item.name);
    },

    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },

    onClickLeft() {
      Dialog.confirm({
        message: "是否退出编辑",
      })
        .then(() => {
          this.$router.go(-1);
        })
        .catch(() => {
          // on cancel
        });

      //   confirm("确定返回");
    },
    onClickRight() {
      console.log(222222);
    },
    sub_btn() {
      // console.log(
      //   this.title,
      //   this.title1,
      //   this.title2,
      //   this.value,
      //   this.value2
      // );
      this.axios({
        method: "post",
        url: "http://localhost:3000/update_job",
        data: {
          user_id: this.user_id,
          status: this.title,
          position: this.title1,
          industry: this.title2,
          city: this.value,
          salary: this.value2,
        },
      });
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
/deep/.van-nav-bar__text {
  color: black;
}
/deep/.van-nav-bar__arrow {
  color: black;
}
/deep/.van-cell {
  padding: 0;
  font-size: 18px;
  font-weight: bold;
  color: balck;
}
.box {
  padding: 8px 0;
  position: relative;
  border-bottom: 1px solid #bbb;
}
._icon {
  position: absolute;
  right: 0;
  bottom: 8px;
}
.box_btn {
  position: fixed;
  width: 90%;
  bottom: 0;
  padding: 3% 5%;
  background-color: white;
}
.sub_btn {
  font-size: 18px;
  font-weight: bold;
}
</style>